import { useState, forwardRef, useImperativeHandle } from "react"

//props的类型
type Iprops = {
    addTodo():void
}

const TodoInput = forwardRef<Iimperative,Iprops>((props, ref) => {
    //通过这个状态对input元素进行受控
    let [val, setVal] = useState<string>('')
    //受控组建的事件处理函数
    let handleChange = (e: any) => {
        setVal(e.target.value)
    }

    //将val暴露给父组件
    useImperativeHandle(ref, () => {
        return {
            val
        }
    })

    //解构props传递的属性

    let {addTodo} = props

    return (
        <fieldset>
            <legend>输入组件</legend>
            <input type="text" value={val} onChange={handleChange} />
            <button onClick={()=>{
                setVal('')//清空输入框
                addTodo()
            }}>增加todo </button>
        </fieldset>
    )
})

export default TodoInput